@use "../../../variables.scss" as *;
@use "./variables.scss" as *;
@use "../fonts" as *;

.sps-table-wrapper {
  overflow: hidden;
}

.sps-table {
  width: 100%;
  background-color: var(--sjs2-color-bg-basic-primary, #fff);
  border-collapse: collapse;

  & > tbody > tr {
    background-color: var(--sjs2-color-bg-basic-primary, #fff);
    & > td:last-of-type > .sps-action-bar .sps-action-button {
      opacity: 0;
    }
    &:hover {
      & > td > div {
        background: var(--sjs2-color-bg-basic-primary-dim, rgba(28, 27, 32, 0.05));
      }
      & > td:last-of-type > .sps-action-bar .sps-action-button {
        opacity: 1;
      }
    }
  }

  tbody > tr:last-of-type {
    border-bottom: none;
    td {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
  tbody > tr:first-of-type {
    border-top: none;
    td {
      border-top: none;
      padding-top: 0;
    }
  }
}

.sd-table__row--expanded {
  & > td {
    & > div {
      .sps-input {
        @include sjs2--typography--default-strong;
      }
    }
  }
}

.sps-table__cell {
  padding: 0;
  padding-bottom: var(--sjs2-spacing-x075, 6px);
  padding-top: 0;
  border-top: none;
  &:first-of-type > div {
    border-top-left-radius: var(--sjs2-radius-semantic-form, 8px);
    border-bottom-left-radius: var(--sjs2-radius-semantic-form, 8px);
  }
  &:last-of-type > div {
    border-top-right-radius: var(--sjs2-radius-semantic-form, 8px);
    border-bottom-right-radius: var(--sjs2-radius-semantic-form, 8px);
  }

  .sps-action-bar{
    justify-content: flex-end;
  }
}

.sps-table__row--main > .sps-table__cell {
  padding-bottom: calc(var(--sjs2-spacing-x075, 6px) + var(--sjs2-spacing-x050, 4px));
  padding-top: calc(var(--sjs2-spacing-x075, 6px) + var(--sjs2-spacing-x050, 4px));
  border-top: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #d4d4d4);
  &.sps-table__cell--detail-panel {
    border-top: none;
    padding: 0 0 var(--sjs2-spacing-x075, 6px) 0;
  }
}

.sps-table__cell--detail-panel {
 
  .sps-panel__content {
    box-shadow: none;
    padding: 0;
  }

  .sps-row .sps-question--nested {
    overflow: initial;
  }

  .sps-panel {
    border: none;
    margin-top: calc(-1 * var(--sjs2-spacing-x075, 6px));
  }
  .sps-table__cell--detail-panel .sps-panel {
    margin-top: 0;
    margin-left: 32px;
  }

  .sps-table__row--empty {
    height: 40px;
  }
}
.sps-table__cell:where(:not(.sps-table__cell--detail-panel)) {
  .sps-checkbox {
    margin: 0 calcSize(2);
  }
}

.sps-table__cell:not(.sps-table__cell--detail-panel):not(.sps-table__cell--actions):first-of-type {
  padding-left: 8px;
}

.sps-table__cell:not(.sps-table__cell--detail-panel) {
  .sps-input {
    appearance: none;
    box-shadow: none;
    background-color: transparent;
    height: auto;
    padding: var(--sjs2-spacing-x100, 8px) 0;

    width: calc(100% + var(--action-container-width));
    margin-right: calc(-1 * var(--action-container-width));
    text-overflow: ellipsis;

    border-radius: var(--sjs2-radius-semantic-form, 8px);
    padding: var(--sjs2-spacing-x100, 8px);
    margin-left: 0;
    transition: margin-left $creator-transition-duration;

    &:hover {
      background: var(--sjs2-color-control-formbox-focused-bg, #f5f5f5);
      box-shadow: var(--sjs2-border-offset-x-form-focused, 0) var(--sjs2-border-offset-y-form-focused, 0)
        var(--sjs2-border-blur-form-focused, 0) var(--sjs2-border-spread-form-focused, 2px)
        var(--sjs2-color-control-formbox-hovered-border, #d4d4d4) inset;
    }

    &:focus,
    &:focus-within {
      background: var(--sjs2-color-control-formbox-focused-bg, #f5f5f5);
      box-shadow: var(--sjs2-border-offset-x-form-focused, 0) var(--sjs2-border-offset-y-form-focused, 0)
        var(--sjs2-border-blur-form-focused, 0) var(--sjs2-border-spread-form-focused, 2px)
        var(--sjs2-color-control-formbox-focused-border, #19b394) inset;
      margin-left: var(--sjs2-spacing-x100, 8px);
    }
  }
}

.sps-matrixdynamic__dragged-row {
  .sps-table__cell {
    padding: 0;
  }
  .sps-input {
    pointer-events: none;
  }
  .sps-drag-element__svg {
    display: none;
  }
}

.sps-table__row {
  --action-width: calc(
    2 * var(--ctr-actionbar-button-padding-top-large-icon, 8px) +
      var(--ctr-actionbar-button-icon-width, var(--sjs-font-size-x3))
  );
  --action-container-width: calc(3 * var(--action-width));
}

.sps-table__row:has(> .sps-table__cell:last-of-type .sv-action:nth-child(4)) {
  --action-container-width: calc(4 * var(--action-width));
}

.sps-table__row {
  &:hover,
  &:focus-within {
    .sps-table__cell:not(.sps-table__cell--detail-panel) {
      .sps-input {
        width: calc(100% - var(--sjs2-spacing-x100, 8px));
        margin-right: 0;
      }
    }
  }
}

.sps-table__cell:not(.sps-table__cell--detail-panel):first-of-type .sps-text {
  padding-left: calcSize(2);
}
.sps-table__cell--actions {
  width: 0;
}

// .sps-table__cell--actions > .sps-matrixdynamic__drag-element {
//   display: inline-block;
//   margin-top: calcSize(0.5);
//   cursor: move;
// }

.sps-table__row--leave,
.sps-table__row--enter {
  animation-name: empty;
  --move-whole-animation-duration: calc(var(--move-animation-duration) + var(--move-animation-delay));
  --fade-whole-animation-duration: calc(var(--fade-animation-duration) + var(--fade-animation-delay));
  animation-duration: max(var(--fade-whole-animation-duration), var(--move-whole-animation-duration));
  & > td {
    & > div {
      animation-name: fadeIn, moveInWithOverflow;
      opacity: 0;
      animation-direction: var(--animation-direction);
      animation-timing-function: var(--animation-timing-function);
      animation-fill-mode: forwards;
      animation-duration:
        var(--fade-animation-duration), var(--move-animation-duration), var(--move-animation-duration);
      animation-delay: var(--fade-animation-delay), var(--move-animation-delay), var(--move-animation-delay);
    }
  }
}
.sps-table__row--enter {
  --move-animation-delay: 0s;
  --move-animation-duration: #{$sps-matrix-row-move-in-duration};
  --fade-animation-duration: #{$sps-matrix-row-fade-in-duration};
  --fade-animation-delay: #{$sps-matrix-row-fade-in-delay};
  --animation-direction: normal;
  --animation-timing-function: #{$ease-out};
}
.sps-table__row--leave {
  --move-animation-delay: #{$sps-matrix-row-move-out-delay};
  --move-animation-duration: #{$sps-matrix-row-move-out-duration};
  --fade-animation-duration: #{$sps-matrix-row-fade-out-duration};
  --fade-animation-delay: 0s;
  --animation-direction: reverse;
  --animation-timing-function: #{$reverse-ease-out};
}
.sps-table__row--detail {
  &.sps-table__row--enter {
    --move-animation-delay: 0s;
    --move-animation-duration: #{$sps-matrix-detail-row-move-in-duration};
    --fade-animation-duration: #{$sps-matrix-detail-row-fade-in-duration};
    --fade-animation-delay: #{$sps-matrix-detail-row-fade-in-delay};
    --animation-direction: normal;
    --animation-timing-function: #{$ease-out};
  }
  &.sps-table__row--leave {
    --move-animation-delay: #{$sps-matrix-detail-row-move-out-delay};
    --move-animation-duration: #{$sps-matrix-detail-row-move-out-duration};
    --fade-animation-duration: #{$sps-matrix-detail-row-fade-out-duration};
    --fade-animation-delay: 0s;
    --animation-direction: reverse;
    --animation-timing-function: #{$reverse-ease-out};
  }
}

.svc-creator--disable-animations {
  .sps-table__row--enter,
  .sps-table__row--leave {
    animation: none;
  }
}

.sps-table__row--empty {
  @include sjs2--typography--default;
  color: var(--sjs2-color-fg-basic-primary, #1c1b20);
  text-align: center;
  height: calc(
    var(--sjs2-spacing-x400, 32px) + var(--sjs2-spacing-x300, 24px) + var(--sjs2-typography-line-height-default, 24px)
  );
}
